import { Card,Row,Col,Table,Input,Button,Tag,Progress,Badge } from 'antd'
import type { TableProps } from "antd"
interface DataType{
    key:string;
    name:string;
    person:string;
    tel:string;
    status:string;
    vacancyRate:number;
    propertyFee:string;
}
const columns:TableProps<DataType>['columns']=[
    {
        title:"No.",
        key:"index",
        render:(value,record,index)=>index+1
    },
    {
        title:"楼宇名称",
        dataIndex:"name",
        key:"name"
    },
    {
        title:"负责人",
        dataIndex:"person",
        key:"person"
    },
    {
        title:"负责人电话",
        dataIndex:"tel",
        key:"tel"
    },
    {
        title:"使用状态",
        dataIndex:"status",
        key:"status",
        render:(value)=>{
            if(value===1){
                return <Tag color="#f50">建设中</Tag>
            }else if(value===2){
                return <Tag color="#2db7f5">已竣工</Tag>
            }else{
                return <Tag color="#87d068">使用中</Tag>
            }
        }
    },
    {
        title:"空置率",
        dataIndex:"vacancyRate",
        key:"vacancyRate",
        render(value){
            return <Progress percent={value} status="active" />
        }
    },
    {
        title:"物业费率",
        dataIndex:"propertyFee",
        key:"propertyFee",
        render(value){
            return <Badge color="green" text={value}></Badge>
        }
    },
    {
        title:"操作",
        key:"operate",
        render(value){
            return <>
                <Button type="primary" className="mr">编辑</Button>
                <Button type="primary" danger>删除</Button>
            </>
        }
    },
]
function Tenement() {
    return <div>
        <Card className='search'>
            <Row gutter={16}>
                <Col span={4}>
                    <p>楼宇名称:</p>
                    <Input />
                </Col>
                <Col span={4}>
                    <p>负责人:</p>
                    <Input />
                </Col>
                <Col span={4}>
                    <Button className='mr' type="primary">查询</Button>
                    <Button>重置</Button>
                </Col>
            </Row>
            <Row>
                <Col span={4}></Col>
            </Row>
        </Card>
        <Card className='mt'>
            <Table columns={columns}></Table>
        </Card>
    </div>
}

export default Tenement